<script lang="ts" setup>
import { onShow } from '@dcloudio/uni-app'
import { ref } from 'vue'
import type { User } from '@/types/user'
import { getUserInfo } from '@/api/user'
import { useUserStore } from '@/store/user'
import { useTabBarTitle } from '@/hooks'
useTabBarTitle(3, '我的', '未登录')
const store = useUserStore()

const userInfo = ref<User>()

onShow(async () => {
  const res = await getUserInfo()

  userInfo.value = res.data
})

const logout = () => {
  uni.showModal({
    title: '提示',
    content: '确定退出吗？',
    confirmColor: '#c82519',
    success: function (res) {
      if (res.confirm) {
        console.log('用户点击确定')
        // 清除token
        store.setUser({})

        // 跳转到登录页面
        uni.redirectTo({
          url: '/subpkg/login/index'
        })
      } else if (res.cancel) {
        console.log('用户点击取消')
      }
    }
  })
}
</script>

<template>
  <view class="my-container">
    <view class="header">
      <van-image
        width="5rem"
        height="5rem"
        round
        fit="cover"
        :src="userInfo?.avatar"
      />
      <text class="nickname">{{ userInfo?.nickname }}</text>
    </view>
    <van-cell title="会员中心" is-link />
    <van-cell title="我的订单" is-link />
    <van-cell title="收货地址" is-link />
    <van-cell title="我的足迹" is-link />
    <van-cell title="我的收藏" is-link />
    <van-cell title="意见反馈" is-link />
    <view class="footer">
      <van-button round type="danger" block @click="logout">退 出</van-button>
    </view>
  </view>
</template>

<style lang="scss" scoped>
.my-container {
  .header {
    width: 100%;
    height: 250px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #c82519;
    flex-direction: column;
    .nickname {
      margin-top: 20px;
      color: white;
      font-size: 18px;
    }
  }
  .footer {
    padding: 20rpx;
  }
}
</style>
